import { useEffect, useState } from 'react';
import { Input, List, Space, Avatar, Modal } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import VirtualList from 'rc-virtual-list';
import {KnowledgeUserListRequest} from "@/pages/Dashboard/Knowledge/service";
import CommonIconFont from "@/components/CommonIconFont";

const { Search } = Input;
const UserSelector = ({ onSelect }: { onSelect?: (user: AircasKB.UserItem) => void }) => {
    const ContainerHeight: number = 400;
    const [keyWord, setKeyWord] = useState<string>('');
    const [loading, setLoading] = useState<boolean>(false);
    const [data, setData] = useState<AircasKB.UserItem[]>([]);

    const appendData = async () => {
        setLoading(true);
        const res:AircasKB.ResponseType<AircasKB.Knowledge.KnowledgeUserListResponse[]> = await KnowledgeUserListRequest({
            userName:keyWord
        });
        if(res.code == 200){
            const result:AircasKB.UserItem[] = [];
            if(res.data.length>0){
                res.data.map((item)=>{
                    result.push( {
                        userId:item.id,
                        name: { title: item.name },
                        picture: {
                            thumbnail: item.avatar || 'https://joeschmoe.io/api/v1/random',
                        },
                    })
                })
                setData(result);

            }
            setLoading(false);
        }
        else{
            setLoading(false);
        }
    };

    useEffect(() => {
        appendData();
    }, [keyWord]);

    const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
        if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop === ContainerHeight) {
            appendData();
        }
    };

    return (
        <>
            <Search
                placeholder="请输入用户名"
                onSearch={setKeyWord}
                enterButton
                style={{ marginBottom: 10 }}
            />
            <List bordered loading={loading}>
                <VirtualList
                    data={data ?? []}
                    height={ContainerHeight}
                    itemHeight={47}
                    itemKey="email"
                    onScroll={onScroll}
                >
                    {(item: AircasKB.UserItem) => (
                        <List.Item key={item.userId}>
                            <List.Item.Meta
                                avatar={<Avatar src={item?.picture?.thumbnail}
                                                icon={
                                                    <CommonIconFont
                                                        // @ts-ignore
                                                        type={`aircaskb-touxiang`}
                                                        style={{ fontSize: 32 }}
                                                    />
                                                }
                                />}
                                title={<a onClick={() => onSelect?.(item)}>{item.name?.title}</a>}
                                 description="空天信息创新研究院"
                            />
                        </List.Item>
                    )}
                </VirtualList>
            </List>
        </>
    );
};

const UserSelectorModal = ({
    show,
    onSelect,
    onCancel,
}: {
    show: boolean;
    onSelect?: (user: AircasKB.UserItem) => void;
    onCancel?: () => void;
}) => {
    return (
        <Modal
            title={
                <Space>
                    <UserOutlined />
                    用户选择
                </Space>
            }
            visible={show}
            centered
            destroyOnClose={true}
            footer={false}
            bodyStyle={{ padding: 10 }}
            onCancel={onCancel}
        >
            <UserSelector onSelect={onSelect} />
        </Modal>
    );
};
export default UserSelector;
export { UserSelectorModal };
